<template>
  <div class="full-width bg-gray-light3 min-width-160">
    <div
      class="bg_img full-height min-height-80 min-width-160 position-relative"
      :style="{'background-image': 'url(' + state.homeBg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      style="padding-top: 1px;"
    >
      <div class="sp-15 ">
        <span class="width-30 d-block wb-break-word text-orange text-80">{{state.homeTitle}}</span>
        <br/>
        <span class="text-orange text-140 line-height-3">.</span>
        <p class="max-width-80 d-block wb-break-word text-24 text-gray mt-6">{{state.homeDesc}}</p>
      </div>
    </div>
    <div class="culture full-width pt-17">
      <div class="flex_between_center spx-15 min-width-160 mb-50">
        <div class="flex-column">
          <img class="width-9 mb-4" :src="HomePart1" alt="01">
          <span class="text-orange text-48">{{lang === 'zh_CN' ? '文化' : 'Culture'}}</span>
          <span class="text-gray-light">{{lang === 'zh_CN' ? '企业文化' : 'Corporate Culture'}}</span>
          <div class="width-1 height-1 bg-orange mt-4"></div>
        </div>
        <div class="flex-column position-relative py-10">
          <img class="width-4 position-absolute left-0 top-0" :src="quoteLeft" alt="quoteLeft">
          <p class="text-18">
            {{lang === 'zh_CN' ? '库珀科技由一群充满梦想的年轻人组成，' : 'Cooper technology is composed of a group of young people full of dreams,'}}
            <br/>
            {{lang === 'zh_CN' ? '他们崇尚自由，脚踏实地，' : 'They advocate freedom and are down-to-earth,'}}
            <br/>
            {{lang === 'zh_CN' ? '他们充满激情，专注于技术创新，' : 'They are full of passion and focus on technological innovation,'}}
            <br/>
            {{lang === 'zh_CN' ? '以人为本，追求卓越充斥着集团工作的每一个角落' : 'People oriented, the pursuit of excellence permeates every corner of the group‘s work'}}
          </p>
          <img class="width-4 position-absolute right-0 bottom-0" :src="quoteRight" alt="quoteRight">
        </div>
      </div>
      <div class="height-60 min-width-160 mt-6 bg-white position-relative">
        <div class="width-130 mx-auto">
          <div class="position-relative">
            <!-- <div @click="handlePreCul" class="swiper-button-prev"></div> -->
            <!-- <div class="swiper-button-next"></div> -->
            <swiper
            ref="culSwiper"
            :slidesPerView="3"
            :spaceBetween="20"
            :freeMode="true"
            :modules="modules"
            class="mySwiper1 width-125 position-absolute"
            style="top: -150px"
          >
            <swiper-slide
              class="swiper-slide flex-column"
              v-for="(banner, index) in state.bannerList"
              :key="index"
            >
              <img class="rounded-10 width-40" :src="banner.img" alt="pic" />
              <div style="width: 40px" class="height-5 border-md border-right border-color-orange"></div>
              <span class="text-22 font-weight-bold mb-4">{{banner.title}}.</span>
              <p>{{banner.desc}}</p>
            </swiper-slide>
          </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="business min-width-160 bg-white full-width pt-17 pb-38">
      <div class="flex-column spx-15">
        <img class="width-9 mb-4" :src="HomePart2" alt="02">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '业务' : 'Business'}}</span>
        <span class="text-gray-light">{{lang === 'zh_CN' ? '业务范畴' : 'Business Category'}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div class="flex_xcenter mt-13">
        <div
          v-for="item in state.businessList"
          :key="item.id"
          class="business flex-column p-10 mr-1 rounded-10 cursor-pointer width-33"
        >
          <div
            class="position-absolute left-14 top-36 z-index-888"
            style="width: 2px; height: 100px; background: #ff5a2d"></div>
          <el-image class="width-23 height-23 rounded-circle" :src="item.img" fit="cover" />
          <span class="text-22 height-6 font-weight-bold my-10">{{item.title}}.</span>
          <p v-html="item.desc" class="businessP mb-10"></p>
          <div @click="handleShowDetail(item.id)" class="px-11 py-2 btn rounded-5 cursor-pointer flex_between_center">
            <span>{{lang === 'zh_CN' ? '查看详情' : 'Get Detail'}}</span>
            <span> ></span>
          </div>
        </div>
      </div>
    </div>
    <div class="cooperation min-width-160 full-width pt-17">
      <div class="flex-column spx-15">
        <img class="width-9 mb-4" :src="HomePart3" alt="03">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '合作' : 'Cooperation'}}</span>
        <span class="text-gray-light">{{lang === 'zh_CN' ? '产业合作' : 'Industry Cooperation'}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div
        :style="{'background-image': 'url(' + state.cooperBannerBg + ')','background-repeat':'no-repeat','background-size':'cover'}"
        class="min-width-160 full-width height-68 position-relative">
        <div class="sp-bg">
          <swiper
            ref="coopSwiper"
            :slidesPerView="1"
            :spaceBetween="30"
            :pagination="{
              clickable: true,
            }"
            :navigation="true"
            :modules="modules2"
            @swiper="handleSlierCoop"
            @slideChange="onSlideChange"
            class="mySwiper width-36 h-100"
          >
            <swiper-slide v-for="(item, index) in state.cooperBanner" :key="index">
              <div class="flex-column m-auto width-24">
                <span class="text-22 font-weight-bold">{{item.title}}</span>
                <p class="my-6 text-gray-light4">{{item.desc}}</p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="development bg-white full-width py-17 spx-10">
      <div class="flex-column">
        <img class="width-9 mb-4" :src="HomePart4" alt="04">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '历程' : 'Course'}}</span>
        <span class="text-gray-light">{{lang === 'zh_CN' ? '发展历程' : 'Development Course'}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <swiper
        :slidesPerView="4"
        :spaceBetween="0"
        :freeMode="true"
        :activeIndex="5"
        :modules="modules"
        @afterInit="handleInit"
        :initialSlide="5"
        class="mySwiper"
      >
        <swiper-slide
          class="swiper-slide flex-column"
          v-for="(banner, index) in state.devBanner"
          :key="index"
        >
          <time-line :title="banner.title" :content="banner.desc" :position="banner.sort%2 === 0 ? 'top' : 'bottom'" />
        </swiper-slide>
      </swiper>
    </div>
    <div class="news full-width pb-22">
      <div class="flex-column bg-white spx-15">
        <img class="width-9 mb-4" :src="HomePart5" alt="04">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '新闻' : 'News'}}</span>
        <span class="text-gray-light">{{lang === 'zh_CN' ? '媒体新闻' : 'Media News'}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div class="d-flex pt-20 mb-7 mx-auto width-150">
        <div @click="handleGetDetail(item.id)" class="position-relative news-item flex-column height-56 width-40 bg-white rounded-10 m-4 cursor-pointer" v-for="(item, index) in state.newsList" :key="index">
          <div
            class="position-absolute left-8 top-46 z-index-888"
            style="width: 2px; height: 80px; background: #ff5a2d"
          ></div>
          <img class="width-40 height-27 mb-6" :src="item.showImg" alt="news pic">
          <div class="px-5 pb-5 pt-10">
            <span class="text-14 text-gray-light1">{{item.createdAt}}</span>
            <p class="news-title text-18 line-height-24 font-weight-bold my-4">{{item.title}}</p>
            <p >{{item.intro}}</p>
            <moreBtn/>
          </div>
        </div>
      </div>
      <div @click="handleJump" class="hoverbtn m-auto width-20 px-11 py-2 border border-color-dark rounded-5 cursor-pointer">
        {{lang === 'zh_CN' ? '查看详情' : 'Get Detail'}} >
      </div>
    </div>
  </div>
  <CommonFooter/>
</template>

<script setup>
import moreBtn from '@/components/moreBtn.vue'
import timeLine from '@/components/timeLine.vue'
import HomePart1 from '@/assets/images/HomePart1.png'
import HomePart2 from '@/assets/images/HomePart2.png'
import HomePart3 from '@/assets/images/HomePart3.png'
import HomePart4 from '@/assets/images/HomePart4.png'
import HomePart5 from '@/assets/images/HomePart5.png'
import quoteLeft from '@/assets/images/quoteLeft.png'
import quoteRight from '@/assets/images/quoteRight.png'
import CommonFooter from '@/components/CommonFooter.vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle'
import 'swiper/css/free-mode'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
// 自动轮播，切换按钮，底部小圆点
import {
  FreeMode,
  Pagination,
  Navigation
} from 'swiper'
import { reactive, watch, computed, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import userStore from '@/store/index'
import { ElMessage } from 'element-plus'
import urls from '@/api/index'

const { proxy } = getCurrentInstance()
const lang = computed(() => userStore.state.lang)
const modules = [FreeMode, Navigation]
const modules2 = [Pagination, Navigation]
const state = reactive({
  homeTitle: '',
  homeBg: '',
  homeDesc: '',
  hoverId: '',
  bannerList: [],
  businessList: [],
  cooperBanner: [],
  devBanner: [],
  newsList: [],
  cooperBannerBg: ''
})
watch(() => userStore.state.lang, () => {
  getData()
})
const getData = () => {
  userStore.commit('CHANGELOAD', true)
  urls.home.getData(userStore.state.lang)
    .then((res) => {
      const { data } = res
      state.bannerList = data.culture
      state.businessList = data.business
      state.cooperBanner = data.cooperation
      state.cooperBannerBg = data.cooperation[0]?.img
      state.devBanner = data.history
      state.newsList = data.news
      state.homeTitle = data.title
      state.homeBg = data.coverImg
      state.homeDesc = data.desc
      userStore.commit('CHANGELOAD', false)
    })
    .catch((err) => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
// const getBg = () => {
//   urls.home.getData(userStore.state.lang)
//     .then((res) => {
//       const { data } = res
//       state.bannerList = data.culture
//       state.businessList = data.business
//       state.cooperBanner = data.cooperation
//       state.cooperBannerBg = data.cooperation[0]?.img
//       state.devBanner = data.history
//       state.newsList = data.news
//       userStore.commit('CHANGELOAD', false)
//     })
//     .catch((err) => {
//       userStore.commit('CHANGELOAD', false)
//       ElMessage.error(err.msg)
//     })
// }
const router = useRouter()
const handleShowDetail = (id) => {
  const list = [{ path: '/introduce', name: 'message.ABOUT_KUPO', query: { id: '62d6bf34e1d8375b113f70a3' } }, { path: '/business', name: 'message.BUSINESS', query: { id: '62d6bf52e1d8375b113f70a4' } }]
  switch (id) {
    case '62cbe7346887a7e14773ab31':
      router.push({
        path: '/kuxinyun'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/kuxinyun', name: 'message.KUXINYUN' }])
      break
    case '62cbe7346887a7e14773ab32':
      router.push({
        path: '/kuzhengtong'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/kuzhengtong', name: 'message.KUZHENGTONG' }])
      break
    case '62cbe7346887a7e14773ab33':
      router.push({
        path: '/huxinyi'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/huxinyi', name: 'message.HUXINYI' }])
      break
    case '62cbe7346887a7e14773ab34':
      router.push({
        path: '/kudatax'
      })
      userStore.commit('ADDBREADCRUMB', [...list, { path: '/kudatax', name: 'message.KUDATAX' }])
      break
    default:
      break
  }
}
const handleGetDetail = (id) => {
  router.push({
    path: '/newsDetail',
    query: { id }
  })
  userStore.commit('ADDBREADCRUMB', [{ path: '/media', name: 'message.MEDIA_SOURCE', query: { id: '62d6bfcbe1d8375b113f70a9' } }, { path: '/newsDetail', query: { id } }])
}
const handleJump = () => {
  router.push({
    path: '/media',
    query: { id: '62d6bfcbe1d8375b113f70a9' }
  })
  userStore.commit('ADDBREADCRUMB', [{ path: '/media', name: 'message.MEDIA_SOURCE', query: { id: '62d6bfcbe1d8375b113f70a9' } }])
}
const handleSlierCoop = (swiper) => {
  console.log(swiper)
}
const onSlideChange = (swiper) => {
  const index = swiper.activeIndex
  state.cooperBannerBg = state.cooperBanner[index].img
}
const handleInit = (swiper) => {
  swiper.slideTo(5, 1, true)
}
const handlePreCul = () => {
  console.log(proxy.$refs.culSwiper)
}
getData()
onMounted(() => {
  const { proxy } = getCurrentInstance()
  console.log(proxy)
})
</script>

<style lang="scss" scoped>
.bg_img{
  background: url('@/assets/images/Home.jpg') no-repeat ;
  background-size: cover;
}
.business{
  background: #f3f3f3;
  position: relative;
  color: black;
  .btn{
    border: 1px solid rgb(85, 85, 85)!important;
  }
}
.business:hover{
  background: #333;
  color: white;
  .btn{
    border: 1px solid rgb(255, 255, 255);
  }
}
.cooperbanner{
  background: url('@/assets/images/Homecooperbanner.jpg') no-repeat;
  background-size: cover;
}
.sp-bg{
  background: rgba(255,255,255,0.65);
  position: absolute;
  right: 310px;
  top: 150px;
  width: 360px;
  height: 490px;
  padding: 70px 0 30px;
  cursor: pointer;
}
.mySwiper1{
  :deep(.swiper-button-next:after){
    font-size: 24px;
  }
  :deep(.swiper-button-prev:after){
    font-size: 24px;
  }
}
:deep(.swiper-button-next){
  color: #555;
}
:deep(.swiper-button-next:after){
  font-size: 14px;
}
:deep(.swiper-button-prev){
  color: #555;
}
:deep(.swiper-button-prev:after){
  font-size: 14px;
}
:deep(.swiper-pagination-bullet-active){
  background: #555;
}
:deepc(.swiper-pagination-bullet){
  background: #777;
}
.spm{
  margin: 0 auto 50px;
}
.news-item {
  .news-title{
    height: 48px;
  }
   p{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-all;
  }
}
.news-item:hover{
  color: #fff;
  background: #222!important;
  img{
    filter: blur(5px);
  }
}
.hoverbtn:hover{
  background: #333;
  color: #fff;
  border: none;
}
</style>
